<template>
	<div id="home-gkdjs">
		<mu-container>
			<h2 class="text-title"><b>2020</b> 高考倒计时</h2>
			<mu-linear-progress
				:color="themeColor.progress.color"
			></mu-linear-progress>
			<mu-card :style="{ backgroundColor: themeColor.countDown.color }">
				<mu-row gutter class="sm-center">
					<mu-col span="6" sm="6" lg="3" xl="3" class="d-flex-center">
						<mu-paper class="demo-paper" circle :z-depth="3">
							<h2 class="text-countdown">{{ day }} 天</h2>
						</mu-paper>
					</mu-col>

					<mu-col span="6" sm="6" lg="3" xl="3" class="d-flex-center">
						<mu-paper class="demo-paper" circle :z-depth="3">
							<h2 class="text-countdown">{{ hour }} 时</h2>
						</mu-paper>
					</mu-col>

					<mu-col span="6" sm="6" lg="3" xl="3" class="d-flex-center">
						<mu-paper class="demo-paper" circle :z-depth="3">
							<h2 class="text-countdown">{{ minute }} 分</h2>
						</mu-paper>
					</mu-col>

					<mu-col span="6" sm="6" lg="3" xl="3" class="d-flex-center">
						<mu-paper class="demo-paper" circle :z-depth="3">
							<h2 class="text-countdown">{{ second }} 秒</h2>
						</mu-paper>
					</mu-col>
				</mu-row></mu-card
			>
		</mu-container>
	</div>
</template>

<script lang="ts">
import { createComponent, computed } from "@vue/composition-api";
import { useCountDown } from "/utils/countDown";

export default createComponent({
	name: "home-gkdjs",

	setup(_, ctx) {
		const themeColor = computed(() => ctx.root.$store.state.theme.theme);
		return {
			themeColor,
			...useCountDown("2020 06 09 09:00:00")
		};
	}
});
</script>

<style lang="less">
#home-gkdjs {
	margin-top: 35px;
	h2 {
		font-size: 1.5rem;
		font-weight: 200;
		&.text-title {
			padding-left: 15px;
			padding-bottom: 5px;
		}
		&.text-countdown {
			font-weight: 400;
		}
		@media screen and (max-width: 768px) {
			font-size: 1.2rem;
			&.text-title {
				text-align: center;
				padding-left: 0px;
			}
		}
	}
	.mu-card {
		padding: 3rem 0;
		@media screen and (max-width: 768px) {
			padding: 1.5rem 0;
		}
		.mu-paper {
			width: 10rem;
			height: 10rem;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 1rem 0;
			cursor: pointer;
			&:hover {
				transform: scale(1.1);
			}

			@keyframes paperRotate {
				0% {
					transform: rotateX(180deg);
					opacity: 0;
				}

				100% {
					transform: rotateX(0deg);
					opacity: 1;
				}
			}
			@media screen and (max-width: 768px) {
				width: 8rem;
				height: 8rem;
				margin: 0.5rem 0;
			}
		}
	}
}
</style>
